import {
  ModalForm,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Form, message, } from 'antd';
import { request } from '../../utils/request.ts';
import { useEffect } from 'react';
const Check = ({ open, setOpen, actionRef, record, }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    if (open) {
      const initial = {
        status: record?.status,
      };
      form.setFieldsValue(initial);
    }
  }, [open, record, form]);
  return (
    <>
      <ModalForm
        title="修改批次状态"
        form={form}
        autoFocusFirstInput
        open={open}
        width={500}
        layout="horizontal" // 关键点
        labelCol={{ span: 6 }} // label 占 6/24
        wrapperCol={{ span: 18 }} // 输入框占 18/24
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setOpen(false),
        }}
        onFinish={async (values) => {
          const { ...other } = values;
          try {
            await request('/api/studentCard/update', {
              method: 'POST',
              data: {
                ...other,
                id: record.id,
              },
            });
            message.success('提交成功');
            setOpen(false);
            actionRef.current?.reload();
          } catch (error) {
            console.error('Failed to submit data:', error);
          }
          return true;
        }}
      >
        <ProFormSelect
          options={[
            {
              value: 0,
              label: '审核中',
            },
            {
              value: 1,
              label: '审核通过',
            },
            {
              value: 2,
              label: '制证中',
            },
            {
              value: 3,
              label: '发货中',
            },
            {
              value: 4,
              label: '已完成',
            },
          ]}
          name="status"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        />
      </ModalForm >
    </>
  );
};
export default Check;